<template>
  <el-card class="box-card-component" style="margin-left:8px;">
    <div slot="header" class="box-card-header">
      <!-- <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png"> -->
      <img :src="article.image_uri">
    </div>
    <div style="position:relative;">
      <mallki class-name="mallki-text" :text="article.title" />
      <div style="padding-top:35px;" />
      <div class="box-card-article" v-html="article.content" />
    </div>
  </el-card>
</template>

<script>
import Prism from 'prismjs'
import { mapGetters } from 'vuex'
import Mallki from '@/components/TextHoverEffect/Mallki'

export default {
  components: { Mallki },

  filters: {
    statusFilter(status) {
      const statusMap = {
        success: 'success',
        pending: 'danger'
      }
      return statusMap[status]
    }
  },
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      statisticsData: {
        article_count: 1024,
        pageviews_count: 1024
      },
      content: "\u003cpre class=\"language-python\"\u003e\u003ccode\u003eimport subprocess, os, time\n\nclass ExecError(Exception):\n    def __init__(self, msg):\n        self.msg = msg\n    def __str__(self):\n        try:\n            re_msg = (\"cmd exit with error return status  errmsg:%s\" % self.msg)\n        except Exception:\n            re_msg = (\"cmd exit with error return status  errmsg:%s\" % self.msg[0])\n        return re_msg\n\ndef exec_shell_cmd(cmd):\n    _pipe = subprocess.PIPE\n    obj = subprocess.Popen(cmd, stdin=_pipe,\n                           stdout=_pipe,\n                           stderr=_pipe,\n                           env=os.environ,\n                           shell=True)\n    out = obj.stdout.read(32*1024000)\n    err = obj.stderr.read()\n    result = obj.communicate()\n    obj.stdin.close()\n    _returncode = obj.returncode\n    if _returncode not in [0]:\n        if err:\n            print result\n            raise ExecError(err)\n    result = (out, \"\")\n    return result\n\ndef exec_shell_cmd_json_result(cmd):\n    ret = exec_shell_cmd(cmd)\n    if len(ret) \u0026gt; 1:\n        return ret[0].split('\\n')[:-1]\n\n\ndef execute_cmd_remote_node_result(host, cmd):\n    try:\n        exc_cmd = '''ssh -t %s \\\"source ~/.bashrc \u0026amp;\u0026amp; source ~/.bash_profile \u0026amp;\u0026amp; %s\\\"''' % (host, cmd)\n        exc_cmd = exc_cmd.replace(\" $\", \" \\$\")\n        print(time.strftime('%Y-%m-%d %H:%M:%S') + \" INFO [-] \" + \"execute_cmd_remote_node_result exc_cmd(%s) begin\" % exc_cmd)\n        result = exec_shell_cmd_json_result(exc_cmd)\n        print(time.strftime('%Y-%m-%d %H:%M:%S') + \" INFO [-] \" + \"execute_cmd_remote_node_result exc_cmd(%s) result(%s)\" % (exc_cmd, str(result)))\n    except BaseException as e:\n        print(time.strftime('%Y-%m-%d %H:%M:%S') + \" ERROR [-] \" + \"ssh base execute_cmd_remote_node_result(%s) error: %s\" % (cmd, e))\n        raise \"ssh base execute_cmd_remote_node_result(%s) error: %s\" % (cmd, e)\n    return result\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e\u0026nbsp;\u003c/p\u003e\n\u003cp\u003e\u0026nbsp;\u003c/p\u003e\n\u003cp\u003e\u0026nbsp;\u003c/p\u003e\n\u003cp\u003e\u0026nbsp;\u003c/p\u003e"
    }
  },
  mounted() {
    Prism.highlightAll()
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  }
}
</script>

<style lang="scss" >
.box-card-component{
  .el-card__header {
    padding: 0px!important;
  }
}
</style>
<style lang="scss" scoped>
.box-card-component {
  .box-card-header {
    position: relative;
    height: 220px;
    img {
      width: 100%;
      height: 100%;
      transition: all 0.2s linear;
      &:hover {
        transform: scale(1.1, 1.1);
        filter: contrast(130%);
      }
    }
  }
  .box-card-article {
    position: relative;
    padding-top:35px;
    height: 220px;
    overflow:scroll;
  }
  .mallki-text {
    position: absolute;
    top: 0px;
    // left: 0px;
    font-size: 20px;
    font-weight: bold;
  }
  @media only screen and (max-width: 1510px){
    .mallki-text{
      display: none;
    }
  }
}
</style>
